Overview

You've recapped the principles of UX and UI and produced your app's wireframe. In this exercise, you’ll go one step further by discovering how to use auto layout in Figma to create an interactive component such as a button. Auto layout can be added to frames to create dynamic components that respond to the size of their child objects. For instance, a button that grows with the length of its label.

Scenario

You can reuse the interactive component button that you will create by using auto layout in this exercise in your solution for the Little Lemon food delivery app.

Instructions

Step 1: Create a basic button using auto layout

• Open a new Figma file and select the text tool to create a text layer.

• Now label it by typing Button .

• With the layer selected, use the shortcut shift + A to add an auto layout. This places the label into an auto layout frame.

• Add a fill to it using the color #F4CE14 (yellow), which is one of the Little Lemon brand colors.

Note: You have now created a functioning auto layout frame that is the foundation for a button. When you change the label, the button will dynamically resize to fit accordingly, as in the examples below:

• Change the corner radius to 8.

Note: The maximum value for a corner radius is 50% of the element's height.

Step 2: Create a component

Select the frame and text and create a component. Alternatively, use the keyboard shortcut, Ctrl + Alt + K on Windows or Cmd + Alt + K on Mac.

Step 3: Add variants

Variants allow you to group different visual versions of your components into one container. They are component combinations that you can group as a single component set. Variants are added to improve design reality through natural gestures. You can add variants to a component after you have created it.

Consider two scenarios when designing a mobile device button: untouched and clicked.

• Use the untouched button as the default button.

• Now, action the following to add a variant:

  • Select the component and add a variant on the right-side menu by clicking the plus icon.

  • Name your variants.

  • Style the variant by changing the color of the fill and or the text.

Step 4: Create an interactive component

• Go to the Prototype section.

• Select the top button and drag the Plus icon to the bottom button.

• Select On click on the Interaction details panel.

• Change the animation to Smart animate and set the time to 600 ms.

• Repeat these steps with the bottom button.

Step 5: Use the component

After creating a component, you can use it instantly, so:

• Create a frame.

• Then, drag the component (in the Local components section on the Assets page) to the frame.

Step 6: View the interactive component

Go to Present mode in the top right corner and test your button.

Conclusion

In this exercise, you learned how to use auto layout to create an interactive component. Here, the auto layout option allowed your button to resize automatically as more properties are added to it.